<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src='lib/cuon-matrix.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="400">
    请更换新版浏览器查看效果!
</canvas>
<p id="nearFar"></p>
<script >
    let VSHADER_SOURCE=`
    attribute vec4 a_position;
    attribute vec4 a_color;
    uniform mat4 u_projMatrix;
    varying vec4 v_color;
    void main(){
        gl_Position=u_projMatrix * a_position;
        v_color=a_color;
    }
    `
    let FSHADER_SOURCE=`
    #ifdef GL_ES
    precision mediump float;
    #endif
    varying vec4 v_color;
    void main(){
    gl_FragColor = v_color;
    }
    `

    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let nf=document.getElementById('nearFar');
        let n=initVertexBuffers(gl);
        if (n < 0) {
            console.log('Failed to set the vertex information');
            return;
        }
        gl.clearColor(0,0,0,1);

        let u_projMatrix=gl.getUniformLocation(gl.program,'u_projMatrix');
        if (!u_projMatrix) {
            console.log('Failed to get the storage location of u_projMatrix');
            return;
        }
        let projMatrix=new Matrix4();
        document.onkeydown=function(e){
            keydown(e,gl,n,u_projMatrix,projMatrix,nf);
        };
        draw(gl,n,u_projMatrix,projMatrix,nf);
    }

    function initVertexBuffers(gl){
        let verticesColor=new Float32Array([
            0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // The back green one
            -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
            0.5, -0.5,  -0.4,  1.0,  0.4,  0.4,

            0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // The middle yellow one
            -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
            0.0, -0.6,  -0.2,  1.0,  1.0,  0.4,

            0.0,  0.5,   0.0,  0.4,  0.4,  1.0,  // The front blue one
            -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
            0.5, -0.5,   0.0,  1.0,  0.4,  0.4,

        ]);
        let n=9;

        let vertexColorbuffer=gl.createBuffer();
        if (!vertexColorbuffer) {
            console.log('Failed to create the buffer object');
            return -1;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorbuffer);
        gl.bufferData(gl.ARRAY_BUFFER,verticesColor,gl.STATIC_DRAW);
        let FSIZE=verticesColor.BYTES_PER_ELEMENT;
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        if(a_position < 0) {
            console.log('Failed to get the storage location of a_position');
            return -1;
        }
        gl.vertexAttribPointer(a_position,3,gl.FLOAT,false,FSIZE*6,0);
        gl.enableVertexAttribArray(a_position);

        let a_color=gl.getAttribLocation(gl.program,'a_color');
        if(a_color < 0) {
            console.log('Failed to get the storage location of a_color');
            return -1;
        }
        gl.vertexAttribPointer(a_color,3,gl.FLOAT,false,FSIZE*6,FSIZE*3);
        gl.enableVertexAttribArray(a_color);
        //解除绑定
        gl.bindBuffer(gl.ARRAY_BUFFER,null);
        return n;
    }

    let g_near=0.0,g_far=0.8;
    function keydown(e,gl,n,u_projMatrix,projMatrix,nf){
        switch(e.keyCode){
            case 39:g_near+=0.01;
                break;
            case 37:g_near-=0.01;
                break;
            case 38:g_far+=0.01;
                break;
            case 40:g_far-=0.01;
                break;
            default:return;
        }
        draw(gl,n,u_projMatrix,projMatrix,nf);
    }

    function draw(gl,n,u_projMatrix,projMatrix,nf){
        projMatrix.setOrtho(-1.0,1.0,-1.0,1.0,g_near,g_far);
        gl.uniformMatrix4fv(u_projMatrix,false,projMatrix.elements);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES,0,n);
        nf.innerHTML='near:'+Math.round(g_near*100)/100+',far:'+Math.round(g_far*100)/100;
    }


</script>

</body>
</html>